<template>
  <div style="width: 100%;height: 100%">
    <div style="height: 40px">
      <div class="block" style="float: right">
        <label style="font-size: 20px; color: #000000;">筛选：</label>
        <el-date-picker
          v-model="dateDuring"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="timeChange">
        </el-date-picker>
        <el-button style="margin: 0 20px" icon="el-icon-refresh" type="primary" @click="refresh"/>
      </div>
    </div>
    <div>
      <el-row>
        <el-col :span="3">
          <el-table
            ref="nameTable"
            :data="tableData"
            style="width: 100%; height: 70vh"
            :highlight-current-row="true"
            height="500"
            @current-change="handleCurrentChange">
            <el-table-column
              prop="equipment"
              label="设备名称"
              width="180">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col  :span="18">
          <line-chart ref="line1" v-loading="loading1" :line-set="line1" style="width: 80vw; height: 70vh"></line-chart>
<!--          <line-chart ref="line2" v-loading="loading2" :line-set="line2"></line-chart>-->
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
import request from '@/network/request'
import LineChart from '@/views/worm/src/humiture/lineChart'
export default {
  name: 'trend',
  components: { LineChart },
  component: {
    LineChart
  },
  mounted () {
    this.dateDuring = [new Date(), new Date()]
    this.getSignal()
    this.getData()
  },
  data () {
    return {
      loading1: false,
      loading2: false,
      currentRow: 0,
      searchDate: '',
      tableData: [],
      line1: {
        lineIndex: '1',
        title: '变化趋势',
        dataAxis: [],
        dataFrom: [],
        data: [],
        color: ['rgba(0, 221, 255)', 'rgba(77, 119, 255)']
      },
      line2: {
        lineIndex: '1',
        title: '湿度变化趋势',
        dataAxis: [],
        dataFrom: [],
        data: [],
        color: ['rgba(0, 221, 150)', 'rgba(77, 119, 150)']
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      dateDuring: ''
    }
  },
  methods: {
    TimeToString (date) {
      var str = ''
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      str = year + '-' + month + '-' + day
      return str
    },
    getData () {
      this.loading1 = true
      this.loading2 = true
      var starttime = this.TimeToString(this.dateDuring[0])
      var endTime = this.TimeToString(this.dateDuring[1])
      const params = {
        startTime: starttime,
        endTime: endTime,
        equipId: this.currentRow.equipId,
        signalName: this.currentRow.equipment,
        factory: this.$store.getters.getFactory
      }
      request({
        method: 'post',
        url: '/getTempByEquipAndTime',
        params: params
      }).then((res) => {
        if (res.data.code === 200 && res.data.message === 'SUCCESS') {
          this.line1.dataAxis = []
          this.line1.data = []
          var items = res.data.data
          for (var i = 0; i < items.length; i++) {
            this.line1.dataAxis.push(items[i].acquisitionTime)
            this.line1.data.push(items[i].value)
          }
          this.$refs.line1.createLineChart()
          this.loading1 = false
        } else if (res.data.message !== 'SUCCESS') {
          this.$message.error(res.data.message)
        } else if (res.data.code === 400) {
          this.$message.error(res.message)
        } else {
          this.$message.error('获取温度失败!')
        }
      })
      console.log('dateDuring log: ' + this.dateDuring)
    },
    getSignal () {
      this.tableData = []
      request({
        method: 'GET',
        url: '/getAllSignalName',
        params: {
          factory: this.$store.getters.getFactory
        }
      }).then((res) => {
        if (res.data.code === 200 && res.data.message === 'SUCCESS') {
          var names = res.data.data
          console.log(res.data)
          for (var i = 0; i < names.length; i++) {
            this.tableData.push({
              equipment: names[i].signalName,
              equipId: names[i].equipId
            })
          }
          this.$refs.nameTable.setCurrentRow(this.tableData[0])
          this.getData()
        } else if (res.data.message !== 'SUCCESS') {
          this.$message.error(res.data.message)
        } else if (res.data.code === 400) {
          this.$message.error(res.message)
        } else {
          this.$message.error('获取设备名称失败!')
        }
      })
    },
    dateChange () {},
    search () {},
    handleCurrentChange (val) {
      this.currentRow = val
      console.log('currentRow log: ', this.currentRow)
      this.getData()
    },
    timeChange () {
      console.log(this.dateDuring[0])
      this.getData()
    },
    refresh () {
      this.dateDuring = [new Date(), new Date()]
      this.getData()
    }
  }
}
</script>

<style scoped>

.el-table /deep/ .el-table__body tr.current-row > td{
  background:#8c939d ;
}
</style>
